<template>
  <div class="application">
    <h3>申请审核</h3>
    <div class="hed1">
      <div><!-- class="all1but1"-->
       <!-- <el-row>
          <el-radio v-model="formInline.kind" label="" border>全部</el-radio>
          <el-radio v-model="formInline.kind" label="0" border>入会申请</el-radio>
          <el-radio v-model="formInline.kind" label="1" border>退会申请</el-radio>

        </el-row>-->
        <el-form size="mini" :model="formInline" :inline="true">
            <el-form-item>
                <el-select placeholder="选择类型" @change="changeType" clearable v-model="formInline.kind">
                  <el-option value="" label="选择全部"></el-option>
                  <el-option value="0" label="入会申请"></el-option>
                  <el-option value="1" label="退会申请"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="选择性别" @change="changeSex" clearable v-model="formInline.sex">
                <el-option value="" label="选择全部"></el-option>
                <el-option value="1" label="男"></el-option>
                <el-option value="2" label="女"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item>
            <el-input v-model="formInline.nickname" placeholder="搜索昵称/ID"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="searbut" type="primary" @click="query">搜索</el-button>
          </el-form-item>
          <el-form-item class="search1">
        <el-button class="czjl001" style="color:rgb(194,128,255);"    @click="openEdit()">操作记录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="cont1" v-for="(item,index) in tableData" :key="index">
      <div class="cont1_shang">
         <div class="header11">
      <div class="head_img">
        <img :src="item.imgUrl" style="width: 100px" height="100px">
      </div>
      <div  class="header1tab">
        <table class="header1_tab222 header1_tab">
          <tr>
            <td class="td4441">
              <span class="header1_tab_name">
                <h3>{{item.nickname}}</h3>
              </span>
              <span class="header1_tab_idnum">ID:{{item.memberNo}}</span>
            </td>
            <td class="td444d">申请时间：{{item.createTime}}&nbsp&nbsp<span v-if="item.state == 3" class="othercom">已加入其它公会</span></td>
           <!-- <td class="td444" rowspan="2">理由：</td>
            <td class="td444c" rowspan="2">{{item.reason}}</td>-->
            <td class="td444" rowspan="2">
              <a class="chakanxq" @click="detailUnion(item,index)">查看详情</a>
            </td>
            <td class="td444" rowspan="2">
              <el-button v-if="item.kind == 0 && item.state != 3" size="mini" class="promise1" type="primary" @click="agreeIn(item)">同意入会</el-button>
              <el-button v-if="item.kind == 0 && item.state != 3" size="mini" class="promise1" type="primary" @click="turnDown(item)">拒绝入会</el-button>
              <el-button v-if="item.kind == 1 && item.state != 3" size="mini" class="promise1" type="primary" @click="agreeIn(item)">同意退会</el-button>
              <el-button v-if="item.kind == 1 && item.state != 3" size="mini" class="promise1" type="primary" @click="turnDown(item)">拒绝退会</el-button>
              <el-button v-if="item.state == 3" size="mini" class="promise1" type="primary" @click="deleteList(item)">删除记录</el-button>
              <!--<el-button v-if="item.kind == 2" class="promise1" type="primary" @click="turnDown(item)"></el-button>-->
            </td>
          </tr>
          <tr>
            <td  class="ages td4441">{{item.age}} &nbsp; {{item.city}}</td>
            <td class="td444d">加入公会时间：{{item.joinTime}}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>

        </table>
      </div>
         </div>
      </div>

      <div class="ga_list77"  v-show="index == getIndex"><!--showDetail-->
          <el-carousel class="elcar01" type="card" arrow="always" :loop="false" :initial-index="1"
                       indicator-position="none" :autoplay="false">
            <el-carousel-item class="elcar02" v-for="(itemsInner, index) in allUserList[index]" :key="index">
          <span class=" ga_list7" style="margin-left:99px;">
            <div class="img_tu"><img :src="itemsInner.selectIcon" style="height: 50px;width: 50px"></div>
            <h3>{{itemsInner.name}}</h3>
            <p>
              <span class="red_36">{{itemsInner.price}}</span>元/局
            </p>
            <div class="fonts12">
              <span class="duanwei">{{itemsInner.rankName}}</span>
              <span>接单数：{{itemsInner.orderNum}}</span>
              <div>总收入：{{itemsInner.earnings}}&nbsp;元</div>
            </div>
            <div class="fonts12">最近接单时间：{{itemsInner.id}}</div>
          </span>
            </el-carousel-item>
          </el-carousel>
      </div>
    </div>
    <el-pagination
      class="pagination-right"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNum"
      :page-sizes="[10]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total">
    </el-pagination>
    <add-label
      v-if="dialog.status"
      :dialog="dialog.status"
      @close="close()"
      @success="success()"
    >
    </add-label>
  </div>
</template>

<script>
  import { getUnionReviewListAPI ,getUnionPeopleDetailAPI ,getUnionAgreeAPI , deleteReAPI} from "@/api/user";
  import { mapGetters } from "vuex";
  import AddLabel from './components/AddLabel'
  export default {
    name: "applicationReview",
    components: { AddLabel },
    data() {
      return {
        formInline: {
          playerNo: "",     //id
          nickname: "",     //昵称
          kind:'',           //申请类型，0入会申请，1退会申请
          sex:'',            //性别 1->男；2->女
          pageNum: 1,       //页码
          pageSize: 10      //
        },
        getIndex:100,
        showDetail:false,
        d:[],
        allUserList:[],
        detailUser:{},
        formInlineDetail:{},
        loading: false,
        tableData: [],
        dialog: {
          status: false,
        },
      };
    },
    computed: {
      ...mapGetters(["buttons"])
    },
    mounted() {
      this.getGameList();

    },
    methods: {
      changeType(value){
        this.formInline.kind = value
        this.getGameList()
      },
      changeSex(value){
        this.formInline.sex = value
        this.getGameList()
      },
      // 根据id查询详情
      getDetails(paramater,index) {
        getUnionPeopleDetailAPI(paramater).then(res => {
          if (res.rtnInfo.code === 0) {
              this.$set(this.allUserList, index, res.rtnInfo.data.gameList);
            //this.allUserList[ind] = res.rtnInfo.data.gameList  ;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 同意入会
      agreeIn(obj){
          this.$confirm(' 是否同意?', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '同意',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let paramater = {
              id:obj.id,
              state:1,             //审核状态 1：审核通过，2：审核驳回
              reason:"原因都是一样的"   //理由
            }
            getUnionAgreeAPI(paramater).then(res => {
              if (res.rtnInfo.code === 0) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                location.reload()
              } else {
                this.$message.error(res.message)
              }
          })
          }).catch(action => {
           if(action == 'cancel'){
             /*取消的业务逻辑*/
           }
          });

      },
      // 拒绝入会
      turnDown(obj){
        this.$confirm(' 是否驳回?', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let paramater = {
            id:obj.id,
            state:2,             //审核状态 1：审核通过，2：审核驳回
            reason:"原因都是一样的"   //理由
          }
          getUnionAgreeAPI(paramater).then(res => {
            if (res.rtnInfo.code === 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getGameList()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(action => {
          if(action == 'cancel'){
            /*驳回的逻辑*/
          }
        });
      },
      // 查看详情
      detailUnion(item,index){
        this.getDetails({playerNo:item.playerNo},index)
        this.getIndex = index
        //this.showDetail = true
      },
      // 编辑打开弹窗
      openEdit() {
        this.dialog.status = true;
      },
      close() {
        this.dialog.status = false
      },
      // 点击查询事件
      query() {
        this.formInline.pageNum = 1;
        this.getGameList();
      },
      // 操作成功的钩子用来更新列表
      success() {
        this.getGameList();
      },
      // 关闭弹窗返回的钩子
      closeInfo() {
        this.dialog.infoStatus = false;
      },

      // pageSize发生改变触发
      handleSizeChange(val) {
        this.pageNum = 1;
        this.pageSize = val;
        this.getGameList();
      },
      // pageNum 发生改变触发
      handleCurrentChange(val) {
        this.formInline.pageNum = val;
        this.getGameList();
      },
      getGameList() {
        this.loading = true
        getUnionReviewListAPI(this.formInline).then(res => {
          this.loading = false
          if (res.rtnInfo.code === 0) {
            this.tableData = res.rtnInfo.data.list
            this.formInline.total= res.rtnInfo.data.total;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      deleteList(obj) {
        this.loading = true
        deleteReAPI({id:obj.id}).then(res => {
          this.loading = false
          if (res.rtnInfo.code === 0) {
            this.$message.success('删除成功')
            this.getGameList()
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  };
</script>

<style scoped>
.application {
    margin-top: 10px;
    margin-left: 59px;
}
.all1but1 {
    margin-left: 15px;
}
.search1 {
  margin-left: 76%;
  margin-top: -47px;
}
.cyname.el-input {
    width: 169px;
    margin-left: 10px;
}
.idnum.el-input {
    float: left;
    width: 66px;
}
.header1 {
    border: 1px solid lightgray;
    margin-top: 20px;
    border-radius: 10px;
    height: 120px;
}
/* .head_img[data-v-8d8715ee] {
    float: left;
    width: 90px;
    height: 90px;
    background: yellow;
    border-radius: 50%;
    margin-left: 15px;
    margin-top: 7px;
    margin-right: 11px;
} */
 .head_img {
    float: left;
    margin-top: -8px;
}
 .head_img img {
    margin-left: 13px;
    margin-top: 14px;
margin-right: 14px
;
}
table.header1_tab {
    font-size: 14px;

}
button.el-button.promise1.el-button--primary {
    margin-left: 23px;
}
.cont1 {
    width: 98%;
    height: auto;
    border: 1px solid lightgray;
    border-radius: 9px;
    padding: 22px 22px 54px 20px;
  margin-bottom: 12px;
}
span.ga_list3 {
    border: 1px solid lightgrey;
    width: 282px;
    height: 320px;
    margin-left: 43px;
    display: inline-block;
    text-align: center;
    border-radius: 37px;
}
/* .img_tu3 {
    width: 130px;
    height: 120px;
    background: yellow;
    margin: 0 auto;
    margin-top: 23px;
} */
span.duanwei3 {
    color: mediumpurple;
    font-size: 12px;
}
.bot1_xia {
    border: 1px solid lightgray;
    border-radius: 3px;
    height: 220px;
    margin-bottom:20px;
}
.bot1 {
    margin-top: 50px;
}
table.bot1_xias_tab {
    width: 100%;
    height: 110px;
    border-bottom: 1px solid lightgrey;
}
table.bot1_xias_tab1 {
    width: 100%;
    height: 110px;

}
table.header1_tab111.header1_tab {
  margin-left: 117px;
  position: absolute;
  width: 82%;
  font-size: 12px;
}
table.header1_tab222.header1_tab {
    font-size: 14px;
    width: 86%;
}

button.el-button.czjl001.el-button--default {
    /* margin-right: -62px; */
    /* margin-right: 2%; */
    float: right;
    margin-right: 20px;
}
.head_img img{
    /* margin-left: 13px; */
    /* margin-top: 14px; */
    /* margin-right: 14px; */
    width: 100px;
    border-radius: 50%;
}
td.td4441 {
    width: 17%;
}
td.td444d {
  width: 45%;
}
td.td444c {
    width: 18%;
}
.el-carousel.elcar01.el-carousel--card {
    width: 88%;
}
 span.ga_list7 {
    display: inline-block;
    width: 220px;
    height: 254px;
    border: 2px solid rgb(194,128,255);
    text-align: center;
    margin-left: 130px;
    margin-top: 30px;
    border-radius: 20px;
  }
  .img_tu {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 20px;
  }
  span.red_36 {
    color: red;
    font-size: 18px;
  }
  span.duanwei {
    font-size: 12px;
    color: purple;
  }
  .fonts12 {
    font-size: 12px;
  }
  .cy_dd {
    margin-top: 30px;
  }
.ga_list77 .ga_list7{
  width:242px!important;
}
span.othercom {
  color: gray;
  font-size: 12px;
}
</style>
